<template>
	<view style="height: 235upx; position: relative; margin-top: 20upx;">
		<!-- 上下两层布局，宽度占用100%,高度176upx -->
		<image :src="imgSrc" lazy-load style="width: 750upx; height: 235upx;"></image>
		<view class="position-absolute left-0 right-0 bottom-0 top-0 d-flex flex-row" style="z-index: 1;">
			<view class="flex-1" @tap="tapEvent('horizontal-left')"></view>
			<view style="flex: 1.5;" @tap="tapEvent('horizontal-center')"></view>
			<view class="flex-1" @tap="tapEvent('horizontal-right')"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imgSrc: {
				type: String,
				default: ''
			}
		},
		methods: {
			tapEvent(region) {
				console.log('tap-event', region)
				this.$emit('tap-event', region)
			}
		}
	}
</script>

<style>
</style>
